<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>

    // 常见的this指向:
    // (1) 一般情况下,普通函数this->window (函数调用时没有依存的对象)
    // (2) 函数调用时属于谁就指向谁 (有依存的对象)  obj.sum  document.onclick
    // (3) 箭头函数没有自己的this对象 => 内部的this就是定义时上层作用域中的this
    //       箭头函数中遇到this,就向外跳一层,找父作用域总的this指向,如果父作用域也是箭头函数继续向外跳一层,依次类推,最终找不到跳到全局作用域 this->window

    // 普通函数 嵌套 箭头函数
    function fn() {
        console.log(this); // this -> window
        var f = () => {
            console.log(this); // this -> window
        }
        f();
    }

    var obj = {
        a: 1,
        b: 2,
        sum: function () {
            console.log(this); // this -> obj
            var f = () => {
                console.log(this); //  this -> obj
            }
            f();
            return this.a + this.b;
        }
    }

    document.onclick = function () {
        console.log(this); // this -> document

        var f = () => {
            console.log(this); //  this -> document
        }
        f();
    }

    fn();  // this -> window
    obj.sum();  // this -> obj



</script>

</html>